<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.pagination.js"></script>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<link rel="stylesheet" type="text/css" href="css/pagination.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.16.custom.css">
<title>Forum Thread</title>
<style>
#forumBody
{
	border-color: #999;
	border-width: 1px;
	border-style: solid;
}

.underLined
{
	border-bottom-color: #999;
	border-bottom-width: 2px;
	border-bottom-style: solid;	
}
#forumBody td
{
	border-bottom:1px solid #DDD;
	padding-left: 10px;
	font-size:12px;
}
.enhanced
{
	background-color: #DDD;
}

tbody tr
{
	cursor: pointer;
}
.bottomLoginDiv
{
		border-color: #AAA;
		border-style: solid;
		border-width: 1px;
		text-align: center;
		padding: 40px;
}

#loginDialog
{
	position: absolute;	
	top:expression((body.clientWidth-50)/2);
	left::expression((body.clientHeight-50)/2);
	border-color: #AAA;
	border-style: solid;
	border-width: 1px;
	padding: 20px;
	width: 450px;
	height: 80px;
	background: white;
	-webkit-box-shadow: 10px 10px 5px #888888; /* Safari */
	box-shadow: 10px 10px 5px #888888;
	font-size: 12px;
	
}
</style>
<script>

//Initialize pagination
$(document).ready(function(){
	initPagination();
});

function initPagination() {
    // count entries inside the hidden content
    var num_entries =${page.recordCount};
    // Create content inside pagination element
    $("#pagination").pagination(num_entries, {
        callback: pageselectCallback,
        items_per_page:10,
        next_text:"Next",
        prev_text:"Prev"
    });
 }
 
//Refresh pagination
function refreshPagination(recordCount)
{	
	var num_entries = recordCount;
    // Create content inside pagination element
    $("#pagination").pagination(num_entries, {
        callback: pageselectCallback,
        items_per_page:10,
        next_text:"Next",
        prev_text:"Prev"
    });
}

//page it
function pageselectCallback(page_index, jq){	
    gotoPage(page_index+1);    
    return false;
}
function gotoPage(pageIndex)
{		
	$.ajax({
		type:"GET",
		url:"topicAction!gotoPage.action?pageIndex="+pageIndex,
		dataType:"json",
		success:function(mess)
		{												
			var data=mess.data;			
			var content="";			
			for(var i in data)
			{				
				content+="<tr id='t"+data[i].id+"' onmouseover=\"addTopicClass("+"\'t"+data[i].id+"\')\" onmouseout=\"removeTopicClass(\'t"+data[i].id+"\')\">";
				content+="<td><img src='img/top"+data[i].top+".gif'>&nbsp;"+"<a href='topicAction!getTopicById.action?id="+data[i].id+"&pageIndex=1'>"+data[i].title+"</a></td><td>"+data[i].authorName+"<br>";
				content+="<font class='commentColor'>"+data[i].createTime+"</font></td><td><font class='titleColor'>"+data[i].reply;
				content+="</font><br><font class='commentColor'>"+data[i].view+"</font></td><td>"+data[i].lastReplyerName+"<br>";
				content+="<font class='commentColor'>"+data[i].lastReplyTime+"</font></td></tr>";
			}
			$("#contentList").html(content);	
			
		}
				
	});	
}

function addTopicClass(div)
{
	$("#"+div).addClass("enhanced");
}

function removeTopicClass(div)
{
	$("#"+div).removeClass("enhanced");
}

function displayLoginDialog()
{
	$("#loginDialog").attr("style","display:block;top:30%;left:30%;position:fixed;");	 
	$( "#loginDialog" ).draggable();
	
}
function hideLoginDialog()
{
	$("#loginDialog").attr("style","display:none;");
}
function login2()
{
	
	$.ajax({
		  type:"GET",
		  url: "userAction!login.action?loginType="+$("#loginType2").val()+"&nameOrEmail="+$("#nameOrEmail2").val()+"&user.password="+$("#password2").val(),		
		  success: function(mess)
		  {
		   	 if(mess.indexOf("r")>0)
		   		 alert("Login fail.You have enter an invalid account.");
		   	 else	   		  
		   	 	   window.location.href="<%=basePath%>${currentUrl}";
		  }
		});
}

function loginEvent2()
{
	if(event.keyCode==13)login2();
}
tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",
    //plugins : "autolink,spellchecker,pagebreak,style,,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
    plugins:"preview,fullscreen,emotions",

    // Theme options
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,,formatselect,fontselect,fontsizeselect,|,forecolor,backcolor,|,image,link,unlink,emotions,code,|,fullscreen,preview,",
    //theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,undo,redo,|,anchor,cleanup,|,insertdate,inserttime,preview,",
    //theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,",
    //theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_buttons4 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
    theme_advanced_disable : "bullist,numlist,hr,removeformat,sub,sup,undo,redo,anchor,cleanup,help,indent,outdent,separator,visualaid,charmap,",    
    

    // Skin options
    skin : "o2k7",
    skin_variant : "silver",

    // Example content CSS (should be your site CSS)
    content_css : "css/example.css",

    // Drop lists for link/image/media/template dialogs
    template_external_list_url : "js/template_list.js",
    external_link_list_url : "js/link_list.js",
    external_image_list_url : "js/image_list.js",
    media_external_list_url : "js/media_list.js",

    // Replace values for the template plugin
    template_replace_values : {
            username : "Some User",
            staffid : "991234"
    }
});



</script>
</head>
<body>
<jsp:include page="WEB-INF/head.jsp"></jsp:include>

<div id="mainForm">
<font class="bigBlue">adanBreak-System forum</font><hr>
<a href="index.jsp">adanBreak-system</a>>forum thread<br>

<!-- forum body start -->
<div id="pagination" style="float:right;"></div><br><br>
<div id="forumBody" style="padding: 15px;">
<table cellspacing="0">
<thead><tr style="color:blue;" ><td width="500">Topics</td><td width="140">Author</td><td width="120">Reply/View</td><td  width="165">Last Reply</td></tr></thead>
<tbody id="contentList">
<c:forEach items="${topics}" var="t">

<tr id="t${t.id }" onmouseover="addTopicClass('t${t.id}')" onmouseout="removeTopicClass('t${t.id}')">
<td><img src="img/top${t.top}.gif">&nbsp;<a href="topicAction!getTopicById.action?id=${t.id }&pageIndex=0">${t.title }</a></td><td>${t.author.name }<br>
<font class="commentColor">${t.createTime }</font></td><td><font class="titleColor">${t.reply }</font><br><font class="commentColor">${t.view }</font></td><td>${t.lastReplyer.name}<br><font class="commentColor">${t.lastReplyTime }</font></td></tr>
</c:forEach>
</tbody>
</table>
</div>
<!-- forum body end -->
<br><br>
<!-- Topic Editor start -->
<c:choose >
<c:when test="${user_session!=null }">
<form method="post" action="topicAction!addNewTopic.action" >
Title:<input type="text" name="topic.title" style="width:850px;float:right;"><br>

        <textarea name="reply.content" style="width:100%;" id="replyContent"></textarea><br>
        <input type="submit" value="Post a new topic"  id="post">
        <script>
        $("#post").button();
        </script>
</form>
</c:when>
<c:otherwise>
<div class="bottomLoginDiv"><a href="javascript:displayLoginDialog();">Login in</a> to post a new topic.</div>
</c:otherwise>
</c:choose>
<!-- Topic Editor end -->

<!-- login form start -->
<div id="loginDialog"  style="display:none;" >
<a href="javascript:hideLoginDialog()"  style="float:right" title="close">
<img src="img/close.png" width="20" height="20">
</a>
<form action="userAction!login.action" style="height:36px;" autocomplete="off">
<table>
<tr>
<td>
<div class="DivSelect">
<select name="loginType" class="SelectList" id="loginType2">
<option value="byName">Name</option>
<option value="byEmail">Email</option>
</select>
</div>
</td>
<td><input name="nameOrEmail" type="text" id="nameOrEmail2" onkeypress="loginEvent2();" class="inputBlue"></td>
<td><a href="findPw.jsp">Find My Password</a></td>
</tr>
<tr>
<td style="padding-left:2px;">Password</td>
<td><input name="user.password" type="password" id="password2" onkeypress="loginEvent2();" class="inputBlue"></td>
<td>
<a href="javascript:login2();">Login</a>&nbsp;|&nbsp;
<a href="<%=basePath %>/register.jsp">Register</a>&nbsp;</td>
</tr>
</table>
</form>
</div>
<!-- login form end -->
</div>
</body>
</html>